<script setup>
import {request} from "@/util/request.js";

import {ref, onMounted} from 'vue'
import {useUserStore} from "@/store/user.js"
import {ElMessage} from "element-plus";
import {formatterDateTime} from "@/util/utils.js";

const orders = ref([])
const userStore = useUserStore()

const options = [
    {label: '已付款', value: 0},
    {label: '未付款', value: 1},
    {label: '已发货', value: 2},
    {label: '已收货', value: 3}]
const config = {
    headers: {
        'Authorization': userStore.token
    }
}

const order = ref({})

function getOrders() {
    request.get('/sys/order/list', config).then(res => {
        if (res.code === 1) {
            orders.value = res.data
        } else {
            ElMessage.error("订单列表获取失败");
        }
    })
}

onMounted(() => {
    getOrders()
})

function handleSearch() {
    console.log(order.value)
    request.post('/sys/order/list', order.value, config).then(res => {
        if (res.code === 1) {
            orders.value = res.data
        } else {
            ElMessage.info("暂无订单")
            orders.value = []
        }
    })
}

function handleReset() {
    order.value = {}
}

// 格式化显示时间
function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) {
        return ''
    }
    return formatterDateTime(new Date(cellValue))
}


</script>

<template>
    <!--订单管理-->
    <el-row>
        <el-col>
            <!--条件查询-->
            <el-form label-width="80px" size="large" :model="order">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label="订单编号">
                            <el-input v-model="order.id" placeholder="请输入订单编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="会员名称">
                            <el-input v-model="order.memberName" placeholder="请输入会员名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="状态">
                            <el-select v-model="order.status" class="m-2" placeholder="订单状态" size="large">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="付款时间">
                            <el-date-picker
                                v-model="order.date"
                                type="daterange"
                                range-separator="到"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                size="large"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3" :offset="1">
                        <el-button type="primary" size="default" @click="handleSearch">搜索</el-button>
                        <el-button type="warning" size="default" @click="handleReset">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!--订单列表-->
            <el-table
                :data="orders"
                style="width: 100%; margin-bottom: 20px"
                row-key="menuId">
                <el-table-column type="expand" width="30">
                    <template #default="props">
                        <el-table :data="props.row.detailsList" :border="false">
                            <el-table-column width="40"/>
                            <el-table-column label="商品编号" prop="productId" />
                            <el-table-column label="商品名称" prop="productName" />
                            <el-table-column label="数量" prop="quantity" />
                            <el-table-column label="单价" prop="unitPrice" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="订单编号" prop="orderId" width="300" />
                <el-table-column label="会员名称" prop="memberName"/>
                <el-table-column label="订单状态" width="120" prop="status">
                    <template #default="scope">
                        <el-tag :type="scope.row.status == '已付款'?'success' : 'danger'" size="small">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="应付金额" prop="totalAmount"/>
                <el-table-column label="实付金额" prop="actualAmount"/>
                <el-table-column label="创建时间" prop="createdAt" sortable :formatter="dateFormatter"/>
                <el-table-column label="付款时间" prop="paymentTime" sortable :formatter="dateFormatter"/>
            </el-table>
        </el-col>
    </el-row>
</template>

<style scoped>

</style>